/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.profile1{font-size: 22px !important;}
		.title {font-size: 15px; padding-top: 52px;}
		.title-1 {font-size: 22px;}
		.logosection.about {background: url(../img/about_header_02.png) no-repeat;}
		.logosection.freebies {background: url(../img/freebies_header_02.png) no-repeat;}
		.logosection.team {background: url(../img/team_header_02.png) no-repeat;}
		.logosection.portfolio {background: url(../img/portfolio_header_02.png) no-repeat;}
		.logosection.services {background: url(../img/services_header_02.png) no-repeat;}
		.logosection.contact {background: url(../img/contact_header_02.png) no-repeat;}
}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.btn-next {right: 20px; bottom: 440px; width: 30px; height: 58px; background: url(../img/direction_nav_next_02.png);}
		.btn-prev {left: 20px; bottom: 440px; width: 30px; height: 58px; background: url(../img/direction_nav_prev_02.png);}
		
		.profile {width: 767px;}
		.parallax-text {padding-top: 120px;}

		/*  MENU  */
		.header-container {width: 768px;}
		.contentbtn, .contentbtn2 {font-size: 12px;}
		.menubtn {margin: 0px 6px;}
		.homebtn {margin: 0px 6px 0px 0px;}
		.contactbtn {margin: 0px 0px 0px 6px;}
		#ancla1{top: 520px !important;}
		#ancla2, #ancla3, #ancla4, #ancla5, #ancla6{top: 140px !important;}

		/*  BANNER  */
		#banner {height: 620px;}
		.infobanner{padding-top: 70px; width: 100%;}
		/*  ABOUT  */
		#about, .page.first {padding-top: 675px;}
		.section {width: 768px;}
		#team .section {width: 768px;}
		.titlesection {font-size: 35px; margin-bottom: 30px;}
		.title-2 {font-size: 22px;}
		.contentsection {margin: 165px auto 0px;}
		.img-about {margin-top: 50px;}
		.pofile-item {margin: 0 27px;}

		/*  FREEBIES  */
		.freebiescontent {width: 420px; font-size: 16px;}
		.bgsepara {height: 300px;}
		.last-projects {padding-top: 120px;}
		.last-project-title {font-size: 90px;}

		/*  TEAM  */
		.team-title {font-size: 90px;}
		.sides {margin: 20px 11px 100px 11px;}
		.centre {margin: 20px 15px 100px 15px;}
		.infomembers {font-size: 18px;}
		.direction-bar {margin-right: 40px;}
		.navigation {width: 768px;}
		.teamcontent {width: 715px; font-size: 16px;}
		.img-team {margin-top: 45px;}
		 .teamshow {width: 735px; margin:0 auto 50px;}
		 .title-1{font-size: 25px;}
		 .dir-right {width: 30px;height: 58px;background: url(../img/direction_nav_next_02.png);bottom: 240px;right: -42px;}
		 .dir-left {width: 30px;height: 58px;background: url(../img/direction_nav_prev_02.png);bottom: 240px;left: -12px;}

		/*  PORTFOLIO  */
		.title.portfolio {font-size: 25px;}
		.portfolio-btn {margin: 12px 25px 0 0;}
		.element {margin: 50px 15px 0px 15px;}
		.foliomenu {margin-left: 30px; width: auto;}
		.project-content{width: 805px;}
		.close{margin-right: 20px;}
		.nav-project {margin-left: 350px;}
		.view-project2 {margin-right: 60px;}
		.works-header {width: 768px;}

		/*  SERVICES  */
		.title.services {font-size: 23px;}
		.disciplines {width: 720px;margin-left: 0px;}
		.works {width: 225px; margin-right: 15px;}
		.titleworks {font-size: 15px;}
		.iconworks {padding: 7px 9px 15px 0;}
		.psd{background: url(../img/stats_photoshop_02.png) no-repeat;}
		.ae{background: url(../img/stats_after_02.png) no-repeat;}
		.ai{background: url(../img/stats_illustrator_02.png) no-repeat;}
		.dream{background: url(../img/stats_dreamweaver_02.png) no-repeat;}
		.skills {width: 180px; height: 176px;}
		.software {width: 720px;margin: auto;margin-bottom: 60px;}
		.img-contact {margin-top: 55px;}
		.progress-bar {width: 460px;}

		/*  CONTACT*/
		.title.contact {font-size: 22px;}
		#messageform {width: 385px;}
		#emailform {width: 165px;margin-bottom: 15px;}
		#nameform {width: 165px; margin-bottom: 15px;}
		#formulario {width: 425px;margin-top: 15px;}
		.email {margin: 20px 0px 10px 20px;}
		.phone {margin: 20px 0px 20px 20px;}
		.skype{margin: 10px 0px 0px 20px;}
		.titlecontact {margin-left: 35px;}
		.contactinfo {width: 243px; margin-top: 0;margin-bottom: 100px;}
		.contact-title {background: url(../img/contact-title_02.png) no-repeat;width:700px;height: 67px;}

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.title.contact {font-size: 22px;}
		.contact-title {background: url(../img/contact-title_03.png) no-repeat;width: 475px;height: 45px;}
		.services-title {background: url(../img/services-title_02.png) no-repeat;width: 475px;height: 66px;}
		.dir-left{bottom: 250px;left: -250px;}
		.dir-right{bottom: 250px;right: -250px;}
		.dots {display: none;}
		.direction-bar {width: 75px;height: 34px; margin: auto; float: inherit;}
		#ancla1{position: absolute; top: 400px;}
		#options {padding-bottom: 0px;}
		.title-profile, .page h2, .works-container h2 {font-size: 75px;}
		.last-projects {padding-top: 20px;}
		.profile {width: auto;margin: 50px 0;}
		.last-project-title {font-size: 50px;padding-top: 50px;}
		.team-title {font-size: 50px;}
		.works-title {font-size: 50px;}
		#banner {margin-top: 60px;}
		#about,.page.first {padding-top: 465px;}
		.navegation_resp{visibility: visible;display: block;position: absolute;width: 126px;top: 30px;right: 30px;font-size: 13px; font-family: 'Open Sans', sans-serif;
		background:url(../img/menu.png); border:none; height:44px; width:44px; padding-right:50px;}
		.navegation_resp option{ background-color:#fff;}
		.content-logo {margin-left: 30px;}
		.portfolio-btn a:hover{color: #F46444; cursor: pointer;}
		.portfolio2-btn a:hover{color: #F46444; cursor: pointer;}
		#emailform {width: 165px;margin-bottom: 15px;}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.project-image img {width: 460px;}
		
		.btn-next{right: -45px;bottom: 380px;}
		.btn-prev{left: -45px;bottom: 380px;}
		.view-project2 {margin-right: 20px;}
		
		.dir-right {width: 30px;height: 58px;background: url(../img/direction_nav_next_02.png) no-repeat;bottom: 272px;right: -220px;}
		.dir-left {width: 30px;height: 58px;background: url(../img/direction_nav_prev_02.png) no-repeat;bottom: 272px;left: -220px;}
		.skill-content {width: 450px; margin: auto;}
		.works-header {width: auto;}
		.profile-element {margin: 15px 0 0 0;}
		.logosection{width: 150px; height: 105px; margin-top: 22px; margin-left: -77px;}
		.pofile-item {width: 215px; float: inherit;margin: auto;}
		.profile-title {width: 200px;margin-top: 24px;}

		/*  MENU & BANNER */
		.contentMenu .logo {display: inherit;position: relative;left: 50%;width: 126px;height: 30px;margin: 8px 0px 20px -61px; background: url(../img/orionlogo_02.png) no-repeat;}
		.contentMenu li{display: none;}
		.contentMenu{margin: auto; width: 100%;padding-left: 0;}
		.displaymenu {width: 100%;}
		.textbanner {width: 400px; font-size: 12px; padding-top: 10px; border-top: 0px solid #1d9686;}
		#banner {height: 430px;margin-top: 100px;}
		.infobanner {padding-top: 35px; width: 100%;}
		.bannerfoot {padding: 0 5px 0px 0;}
		.welcome {font-size: 130px;height: 80px;margin-top: 45px;}
		.titlebanner {width: 200px;height: 78px;background: url(../img/jellythemes_02.png) no-repeat !important;}

		/*  ABOUT  */
		.topline {margin-top: 75px;}
		.titlesection {margin-bottom: 35px;}
		.section {width: auto; padding-top: 80px; padding-bottom: 20px;}
		#team .section {width: auto;}
		.contentsection {margin: 0; text-align: center;}
		.titlesection{line-height: 25px; font-size: 30px; text-align: center; width: 100%;}
		#freebies .titlesection {line-height: 35px;}
		.title-2 {font-size: 20px;}
		.tweets{width: auto; margin-top: 20px; margin-bottom: 20px; float: inherit; margin-left: 35px;}
		.symbol {margin: auto; float: left; margin-top: 5px;}
		.twitersection{height: auto;}
		.alltweets{margin: auto; top: 20px;}
		.spacer {display: none;}

		/*  FREEBIES  */
		.imagefribbies {margin: auto; float: inherit;width: 475px;height: 279px;background: url(../img/macbook-base_02.png) no-repeat}
		.pantallaFondo {margin: 15px 0 0 61px; width: 355px;height: 225px;}
		.pantalla, .slideshow li img {margin: 15px 0 0 61px;width: 355px;height: 225px;}
		.wall0 {background: url(../img/wall1_02.jpg) no-repeat;}
		.wall1 {background: url(../img/wall2_02.jpg) no-repeat;}
		.wall2 {background: url(../img/wall3_02.jpg) no-repeat;}
		.wall3 {background: url(../img/wall4_02.jpg) no-repeat;}
		.brillo {width: 355px;height: 237px;background: url(../img/shine_02.png) no-repeat;margin-left: 50px;}
		.freebiescontent {margin: 20px 30px 30px 30px; width: auto; text-align: center; float: inherit;}
		.download {margin: auto; float: inherit; margin-top: 20px;}
		.img-freebies {}

		/*  TEAM  */
		.teamhead {padding: 15px 35px 0px 20px;}
		.titlesection.ourteam {float: inherit;}
		.teamdescription { border: none;height: auto; float: inherit; padding: 0; text-align: center;}
		.teamcontent {margin: 20px 0px 30px 0px; width: auto; text-align: center; float: inherit;}
		.infomembers {font-size: 18px;}
		.socialicons {width: auto;}
		.teamshow {width: auto;}
		.centre, .sides {margin: 20px 10px 100px 0px;}
		.infomembers {font-size: 17px;}
		.teamshow {width: 470px; margin:0 auto 50px;}
		.navigation {width: auto;}
		.teamlist{height: 400px;}

		/*  PORTFOLIO  */
		.title.portfolio {font-size: 18px;}
		.portfoliocontent {padding-top: 10px !important;}
		#portfolio2 {height: 170px;}
		#container2 {width: 482px; margin: auto; padding-bottom: 50px;}
		.element {margin: 50px 10px 0px 10px;}
		.all-btn, .websites-btn, .design-btn, .motion-btn, .branding-btn{display: none;}
		.portfolio-btn {margin: 12px 20px 0 0;}
		.folio-btn {padding-left: 0; line-height: normal;}
		.foliomenu {width: 400px; margin: auto;}
		.infoproject {font-size: 20px;}
		.info-pf{position: relative;}
		.img-portfolio {}
		.project-content {width: 500px;}
		.info-project {width: auto;margin: 0 20px;}
		.view-btn {width: 500px;margin: 0 0 40px 0; overflow: auto;}
		.nav-project {margin-left: 206px;}
		.img-project {width: 460px;height: 287px;}
		.project-one {background: url(../img/projects/project_01_02.jpg) no-repeat;width: 460px;height: 287px;margin-right: 234px;}
		.project-two {background: url(../img/projects/project_02_02.jpg) no-repeat;width: 460px;height: 287px;margin-right: 234px;}
		.project-video,.video-embed {width: 460px;height: 287px;margin-right: 234px;}
		.close {right: -80px;}


		/*  SERVICES  */
		.title.services {font-size: 23px;}
		.servicesdescription {border: none; height: auto; float: inherit; padding: 0; text-align: center;}
		.disciplines {width: 450px; margin: auto; padding-bottom: 30px; padding-top: 15px;}
		.works {width: 190px; height: auto; margin: auto; margin-bottom: 20px; margin-right: 10px; margin-left: 20px; font-size: 14px;}
		.iconworks {padding: 7px 5px 15px 0; width: 35px;}
		.titleworks {font-size: 12px;}
		.software {}
		.progress-bar {width: 235px;}
		.info-skills {font-size: 14px;}

		/*  CONTACT  */
		.contactdescription {border: none; height: auto; float: inherit; padding: 0; text-align: center; color: #fff;}
		#formulario, #messageform, #nameform {width: 460px; float: inherit; margin: auto;}
		#nameform, #emailform, #messageform {width: 420px; float: inherit;}
		#nameform{margin-bottom: 15px;}
		p {margin-bottom: 15px;}
		.contactinfo {margin-bottom: 40px; float: inherit;}



	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		.project-image img {width: 365px;}
		
		.btn-next{width: 11px; height: 14px; background: url(../img/btn-next.png); right: 0px; bottom: 230px;}
		.btn-prev{width: 11px; height: 14px; background: url(../img/btn-prev.png); left: 0px; bottom: 230px;}
		.img-project {margin-bottom: 35px;}
		
		.parallax-text {font-size: 25px;font-weight: 600;line-height: 27px;padding-top: 105px;}
		.titlebanner {width: 200px;height: 78px;background: url(../img/jellythemes_02.png) no-repeat !important;}
		.welcome {font-size: 80px;margin-top: 30px;height: 60px;}
		.works-header {width: auto;}
		.view-project2 {margin-right: 55px; margin-top: 22px;}
		/*  SPACERS PARALLAX */
		.bgsepara {height: 300px;}
		.img-about {margin-top: 46px;}
		.img-freebies {}
		.img-team {margin-top: 45px;}
		.img-portfolio {}
		.img-contact {margin-top: 60px;}

		.last-projects {padding-top: 20px;overflow: hidden;width: 300px;margin: auto;}
		.contact-title {background: url(../img/contact-title_04.png) no-repeat;width: 350px;height: 34px;}
		.services-title {background: url(../img/services-title_03.png) no-repeat;width: 350px;height: 49px;}
		.pofile-item{float: inherit;margin: auto;}

		/*  MACBOOK  */
		.imagefribbies {margin: auto; float: inherit; width: 300px;height: 206px;background: url(../img/macbook-base_03.png) no-repeat; background-size:300px auto;}
		.pantallaFondo {margin: 10px 0 0 44px; width: 261px;height: 165px;}
		.pantalla, .slideshow li img {margin: 10px 0 0 38px;width: 223px; height:150px;}
		.wall0 {background: url(../img/wall1_03.jpg) no-repeat;}
		.wall1 {background: url(../img/wall2_03.jpg) no-repeat;}
		.wall2 {background: url(../img/wall3_03.jpg) no-repeat;}
		.wall3 {background: url(../img/wall4_03.jpg) no-repeat;}
		.brillo {width: 269px;height: 180px;background: url(../img/shine_03.png) no-repeat;margin-left: 32px;}
		#filters{ width:300px;}


		.title.portfolio {font-size: 18px;}
		.title.services {font-size: 23px;}
		.title.contact {font-size: 22px;}
		/*  MENU & BANNER */
		.contentMenu .logo {margin: 35px 0px 20px 0px; background: url(../img/orionlogo_02.png) no-repeat;display: inherit;position: relative;left: 50%;width: 126px;height: 30px;margin: 8px 0px 20px -61px;}
		.contentMenu li{display: none;}
		.contentMenu{margin: auto; width: 100%;padding-left: 0;}
		.displaymenu {width: 100%;}
		.textbanner {width: 300px; font-size: 12px; padding-top: 10px; border-top: 0px solid #1d9686;}
		#banner {height: 430px;}
		.infobanner {padding-top: 70px; width: 100%;}
		/*.bannerfoot {width: 30px; height: 15px; background: url(../img/bannerfooter_02.png) no-repeat;padding: 0 4px 0px 0;}*/

		/*  ABOUT  */
		.logosection {width: 150px;height: 105px;margin-top: 22px; margin-left: -77px;}
		.profile {margin: 50px 0 0;}
		.topline {margin-top: 75px;}

		.titlesection {margin-bottom: 10px; font-size: 25px;}
		.title-2 {font-size: 20px;}
		.section {width: auto; padding-top: 40px; padding-bottom: 20px;}
		#team .section {width: auto;padding-bottom: 0px;}
		.contentsection {margin: 0;text-align: center;}
		.titlesection{line-height: 25px; font-size: 23px; text-align: center; width: 100%;}
		.tweets{width: auto; text-align: center; margin-top: 20px; margin-bottom: 20px;}
		.symbol {margin: auto; float: inherit;}
		.twitersection{height: auto;}
		.alltweets{float: inherit; top: 20px; margin-left: 31%;}
		.spacer {display: none;}

		/*  FREEBIES  */
		.imagefribbies {margin: auto; float: inherit;}
		.freebiescontent {margin: 20px 30px 30px 30px; width: auto; text-align: center; float: inherit; font-size: 15px;}
		.download {margin: auto; float: inherit; margin-top: 20px;}
		#freebies .titlesection {font-size: 25px;}
		.last-project-title {font-size: 40px;padding-top: 40px;}

		/*  TEAM  */
		.titlesection.ourteam {font-size: 34px; margin-left: 28px;}
		.teamhead {padding-top: 40px;}
		.titlesection.ourteam {float: inherit;}
		.teamdescription { border: none;height: auto; float: inherit; padding: 0; text-align: center; font-size: 15px;}
		.teamcontent {margin: 20px 0px 30px 0px; width: auto; text-align: center; float: inherit; font-size: 15px;}
		.infomembers {font-size: 18px;}
		.socialicons {width: auto;}
		.teamshow {width: auto;}
		.centre, .sides {margin: 20px 10px 100px 0px;}
		.infomembers {font-size: 17px;}
		.teamshow {width: 228px; margin: auto;}
		.navigation {width: auto;}
		.teamlist{height: 380px;}
		.dir-right {bottom: 235px;right: -140px;}
		.dir-left {bottom: 235px;left: -145px;}
		.title-profile, .page h2, .works-container h2 {font-size: 50px;}
		.team-title {font-size: 40px;}

		/*  PORTFOLIO  */
		.portfoliocontent {padding-top: 10px !important;}
		#portfolio2 {height: 170px;}
		#container2 {width: 247px; margin: auto; padding-bottom: 50px;}
		.element {margin: 50px 10px 0px 10px;}
		.all-btn, .websites-btn, .design-btn, .motion-btn, .branding-btn{display: none;}
		.portfolio-btn {margin: 12px 13px 0 0; font-size: 14px;}
		.folio-btn {padding-left: 0; line-height: normal;}
		.foliomenu {width: 350px; height: 49px; margin: auto;}
		.infoproject {font-size: 20px;}
		.info-pf{position: relative;}

		.project-content {width: 365px; margin-bottom: 65px;}
		.info-project {width: auto;margin: 0 5px;}
		.view-btn {width: 420px;margin: 0; overflow: auto;}
		.nav-project {margin-left: 140px;}
		.img-project {width: 365px;height: 228px;}
		.project-one {background: url(../img/projects/project_01_03.jpg) no-repeat;width: 365px;height: 228px;margin-right: 329px;}
		.project-two {background: url(../img/projects/project_02_03.jpg) no-repeat;width: 365px;height: 228px;margin-right: 329px;}
		.project-video,.video-embed {width: 365px;height: 228px;margin-right: 329px;}
		.close {right: -65px;top: 32px;}

		/*  SERVICES  */
		.servicesdescription {border: none; height: auto; float: inherit; padding: 0; text-align: center; font-size: 15px;}
		.disciplines {width: 300px; margin: auto; padding-bottom: 30px; padding-top: 15px;}
		.works {width: 260px; height: auto; margin: auto; margin-bottom: 20px; margin-right: 20px; margin-left: 20px; font-size: 14px;}
		.iconworks {padding: 7px 10px 15px 0; width: 52px;}
		.titleworks {font-size: 17px;}
		.software {width: 300px;float: inherit; margin: auto;}
		.progress-bar {width: 145px;}
		.skill-content {width: 300px;}
		.percent {padding: 0 10px 0 0;}
		.info-skills {margin: 38px 10px;font-size: 12px;}

		/*  CONTACT  */
		.title.contact {font-size: 14px;}
		.contactdescription {border: none; height: auto; float: inherit; padding: 0; text-align: center; color: #fff; font-size: 15px;}
		#formulario, #messageform, #nameform {width: 300px;; float: inherit; margin: auto;}
		#nameform, #emailform, #messageform {width: 250px; float: inherit;}
		#nameform{margin-bottom: 15px;}
		p {margin-bottom: 15px;}
		.contactinfo {margin-bottom: 40px; float: inherit;}
		.titlecontact {margin-left: 20px;}
		.email {margin: 20px 0px 10px 20px;}
		.phone {margin: 20px 0px 20px 20px;}
		.skype {margin: 10px 0px 0px 20px;}

	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/